<template>
  <div class="detail">
    <van-nav-bar
      title="水果商城"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img :src="detailData.goodsImg" alt="" class="image"
      /></van-swipe-item>
    </van-swipe>
    <div class="detail-bottom">
      <div class="bottom-price">
        <span style="font-size: 24px">￥</span
        ><span style="font-weight: 700">{{ detailData.mallPrice }} </span>
        <span
          style="
            text-decoration: line-through;
            color: rgb(130, 130, 130);
            font-size: 24px;
          "
          >{{ detailData.retailPrice }}</span
        >
      </div>
      <div class="goods-name" style="font-size: 16px">
        <span style="color: rgb(255, 136, 0)">自营 </span> &nbsp;
        <span style="background: rgb(255, 136, 0); border-radius: 5px"
          >次日达
        </span>
        &nbsp;
        <span style="color: rgb(175, 82, 239)">深圳平湖仓 </span>
      </div>
      <div class="bottom-name">
        {{ detailData.slogan }}
      </div>
      <div class="bottom-margin">
        <div style="width: 10%; font-size: 16px">时效</div>
        <div>
          <p style="font-size: 16px">当日16：00前下单，预计次日送达！</p>
          <p style="font-size: 16px; font-weight: 700">
            预售商品按预设时间配送，不便之处，敬请谅解！
          </p>
        </div>
      </div>
      <div class="bottom-margin">
        <div style="width: 10%; font-size: 16px">已选</div>
        <div>
          <p style="font-size: 20px; color: rgb(255, 136, 0); font-weight: 700">
            300g，1盒
          </p>
        </div>
      </div>
      <div class="bottom-margin">
        <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label="送至"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
            title="地区选择"
          />
        </van-popup>
      </div>
      <div class="bottom-margin">
        <div style="width: 10%; font-size: 16px">毛重</div>
        <div>
          <p style="font-size: 16px">0.33kg/盒</p>
        </div>
      </div>
      <div class="bottom-margin">
        <div style="width: 10%; font-size: 16px">运费</div>
        <div>
          <p style="font-size: 16px; color: rgb(255, 136, 0)">根据地区计算</p>
          <p style="font-size: 16px">
            全场满199元包邮（限深圳市），单笔不足运费8元起，
            生鲜类仅限深圳同城！
          </p>
        </div>
      </div>
      <div class="bottom-margin">
        <div style="width: 10%; font-size: 16px">提示</div>
        <div>
          <p style="font-size: 16px; color: rgb(255, 136, 0)">
            产品图片及其描述仅作参考，请您以收到的实物为准！
          </p>
          <p style="font-size: 16px">
            收货后商品如有损坏，请您当场拍下图片，并保留相关商品，<br />
            在24小时之内及时联系售后客服，以便我们给您更换完好的<br />
            商品！如非质量问题，概不退换！<br />
          </p>
        </div>
      </div>
    </div>
    <h2 class="product-introduction">产品介绍</h2>
    <div v-html="detailData.goodsDesc" class="goods-desc"></div>
    <van-tabbar>
      <van-goods-action-icon
        icon="home-o"
        text="首页"
        @click="$router.go(-1)"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="jump" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="shoppingCart(detailData)"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="purchase(detailData)"
      />
    </van-tabbar>
  </div>
</template>
<script>
import mySite from "@/common/commonData/index.js";
import { saveOrUpdateOrderMore } from "../common/Api/index.js";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      detailData: {},
      value: "北京市/北京市/东城区",
      showArea: false,
      areaList: mySite.areaList,
      information: JSON.parse(sessionStorage.getItem("information")),
    };
  },
  created() {
    this.detaileDdata();
  },
  mounted() {},
  methods: {
    jump() {
      sessionStorage.setItem("active", JSON.stringify("friends"));
      this.$router.push("/");
    },
    //地区选择
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    detaileDdata() {
      this.detailData = JSON.parse(sessionStorage.getItem("detail"));
      console.log(this.detailData);
    },
    shoppingCart(item) {
      Dialog.confirm({
        title: "购物车",
        message: "是否添加购物车",
      })
        .then(() => {
          if (!JSON.parse(sessionStorage.getItem("information"))) {
            Dialog.alert({
              title: "提示",
              message: "你还未登陆,请登陆",
            }).then(() => {
              sessionStorage.setItem("active", JSON.stringify("setting"));
              this.$router.go(-1);
            });
          } else {
            let arr = [
              {
                address: this.value,
                uId: this.information.uId,
                name: item.goodsName,
                quantity: 1,
                money: item.mallPrice,
                userName: this.information.userName,
                mid: item.id,
                phone: item.phone,
                distinguish: "购物车",
                insideKey: item.insideKey,
                goodsImg: item.goodsImg,
              },
            ];
            saveOrUpdateOrderMore({ arr: arr }).then((res) => {
              if (res == "操作成功") {
                Toast.success("添加成功");
              } else {
                Toast.fail(res);
              }
            });
          }

          // on confirm
        })
        .catch(() => {
          Toast("取消加入购物车");
        });
    },
    // 购买
    purchase(item) {
      console.log(this.information);
      if (!JSON.parse(sessionStorage.getItem("information"))) {
        Dialog.alert({
          title: "提示",
          message: "你还未登陆,请登陆",
        }).then(() => {
          sessionStorage.setItem("active", JSON.stringify("setting"));
          this.$router.go(-1);
          return;
        });
      }
      item.quantity = 1;
      item.price = item.mallPrice;
      sessionStorage.setItem("purchase", JSON.stringify([item])); //存储信息
      this.$router.push("/settlement");
    },
  },
};
</script>
<style scoped  lang="scss">
.detail {
  width: 100%;
  margin-bottom: 50px;
  background: #fff;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .image {
    width: 100%;
    height: 300px;
    border-bottom: 1px solid rgb(102, 102, 102);
  }
  .detail-bottom {
    width: 95%;
    margin: auto;
    background: #fff;
    .bottom-price {
      margin: 5px 0;
      font-size: 28px;
      color: rgb(255, 136, 0);
    }
    .goods-name {
      font-size: 16px;
      padding: 2px 0px;
      background: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10px;
    }
    .bottom-name {
      font-size: 14px;
      font-weight: 600;
      padding-bottom: 10px;
    }
    .bottom-margin {
      display: flex;
      margin-bottom: 20px;
      .van-field {
        padding: 0;
      }
      .van-field__label {
        font-size: 12px;
      }
    }
  }
  .product-introduction {
    text-align: center;
    margin: 20px 0;
    font-size: 24px;
  }
}
</style>